import {
    Component, ComponentFactoryResolver, ElementRef, ViewContainerRef, Renderer2, OnInit, HostListener
} from '@angular/core';
import { EsCommonService } from '../../../common/escommon.service';
import { ProcedureService } from '../../../common/procedure.service';
import { DrawService } from '../../../common/draw/draw.service';
import { WorkFlowDetailComponent } from '../../../detail/workflow/workflow.detail.component';

@Component({
    templateUrl: './procedure.component.html',
    styleUrls: ['./procedure.component.css', '../../../app.component.css'],
})
export class ProcedureComponent implements OnInit {
    nowCheckList: Array<any> = [];
    searchStr: any;
    nowPage: number;
    totalCount: number;
    pageSize;
    basic;
    headers = [
        {
            field: 'id',
            title: 'ID',
            canSort: true,
            width: '20%',
        },
        {
            field: 'name',
            title: '流程名称',
            canSort: true,
            width: '25%',
        },
        {
            field: 'processKey',
            title: '流程key',
            canSort: false,
            width: '10%',
        },
        {
            field: 'status',
            title: '状态',
            canSort: false,
            width: '10%',
        },
        {
            field: 'comment',
            title: '备注',
            canSort: false,
            width: '10%',
        },
        {
            field: 'createTime',
            title: '创建时间',
            canSort: false,
            width: '25%',
        },
        {
            field: 'creator',
            title: '创建人',
            canSort: false,
            width: '25%',
        }
    ];
    datas: Array<any>;
    constructor(private elementref: ElementRef, private renderer: Renderer2, private drawService: DrawService,
        private viewContainerRef: ViewContainerRef, private resolver: ComponentFactoryResolver,
        private procedureService: ProcedureService) {
        this.basic = false;
        this.pageSize = 12;
    }

    ngOnInit(): void {
        this.loadData({
            pageNo: 1,
            pageSize: this.pageSize,
        });
    }

    loadData(data?) {
        let d = this.procedureService.queryMachine(data);
        this.datas = d.data;
        this.totalCount = d.totalCount;
        //this.totalCount = 100;
        this.nowPage = 1;
    }

    search(event) {
        if (event == null) {
            this.loadData({
                search: this.searchStr,
                pageNo: 1,
                pageSize: this.pageSize,
            });
        } else {
            if (event.key == 'Enter') {
                this.loadData({
                    search: this.searchStr,
                    pageNo: 1,
                    pageSize: this.pageSize,
                });
            }
        }
    }

    paginationChange() {
        this.loadData({
            search: this.searchStr,
            pageNo: this.nowPage,
            pageSize: this.pageSize,
        });
    }

    sortEvent(event) {
        this.loadData({
            search: this.searchStr,
            pageNo: 1,
            pageSize: this.pageSize,
            sort: event
        });
    }

    checkChange(event) {
        this.nowCheckList = event;
    }

    batchOps(data) {
        if (data.showSubContainer == null) {
            data.showSubContainer = false;
        }
        let value = !data.showSubContainer;
        for (let d of this.datas) {
            if (d.id != data.id) {
                d.showSubContainer = false;
            } else {
                d.showSubContainer = value;
            }
        }
    }

    @HostListener('document:click', ['$event'])
    onClick(event) {
        if (event.target.classList.contains('check-button')) {
            return;
        }

        for (let d of this.datas) {
            if (d.showSubContainer) {
                if (!this.elementref.nativeElement.querySelector('#buttonContainer' + d.id).contains(event.target)) {
                    d.showSubContainer = false;
                    return;
                }
            }
        }


    }
    just(data) {
        data.showSubContainer = false;
    }

    openSlider(psMachine) {
        this.drawService.open({
            component: WorkFlowDetailComponent,
            data: psMachine
        });
    }
}